<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		
		<script src="${base}/js/jquery-1.7.js"></script>
		
		<link rel="stylesheet" href="${base}/plugin/music/css/zplayer.min.css" />
		<script type="text/javascript" src="${base}/plugin/music/js/zplayer.min.js" ></script>
		<title>zplayer</title>
	</head>
	<body>
	    <h1>my music</h1>
		<div id="player"></div>
<script>
		$(window).load(function () {
			loadData('${style}');
	    });
		function loadData(style){
			$.ajax({
			    url:'${base}/music/list',
			    type:'POST', //GET
			    contentType:'application/x-www-form-urlencoded',
			    async:false,    //或false,是否异步
			    data:{
			        style: style
			    },
			    timeout:5000,    //超时时间
			    dataType:'json',  
			    success:function(result,textStatus,jqXHR){
			    	var resultStr = JSON.stringify(result);
			    	result = $.parseJSON(resultStr);
			    	initPlayer(result.data);
			    }
			})
		}
		
		function initPlayer(data){
		 	var zp1 = new zplayer({
		        element: document.getElementById("player"),
		        autoPlay: 1,
		        musics: data
		    })
		    zp1.init();
		}
</script>
		
	</body>
</html>
